<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div class="map" id="mapEchart" style="width:100%;height:530px"></div>
    <div class="map-wutai">
      <el-image :src="require('@/assets/background/wutai.svg')"></el-image>
    </div>
  </div>
</template>

<script>
import tdTheme from "@/api/ops/echart/theme.json"; // 引入默认主题
import "echarts-gl"
import * as geoJson from "@/utils/china3d.json";
import mapbg from '@/assets/background/mapbg.png'
// import {
//   provinceRegionCount,
//   alarmCountGroupByProvince,
// } from "@/api/ops/dashboard";

export default {
  name: "chinaMap",
  data() {
    return {
      myChart: null,
    }
  },
  methods: {
    Load3DMap() {
      // 3D地图配置项
      const option = {
        tooltip: {
          show: true,
        },
        //热力图配置项
        // visualMap: [
        //   {
        //     type: "continuous",
        //     text: ["xxx"],
        //     calculable: true,
        //     max: 250,
        //     inPange: {
        //       color: ["#87aa66", "#eba438", "#d94d4c"],
        //     },
        //   },
        // ],
        geo3D: {
          zlevel: 1,
          top: 30,
          map: "quanguo", // 重要！！！注册的地图名字叫啥，这里就填啥
          shading: "color", // 重要！！！选择texture渲染的方式
          colorMaterial: {
            detailTexture: mapbg, //重要！！！2D地图的DOM作为纹理贴图放到3D上
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
          },
          itemStyle: {
            color: "#ccc",
            opacity: 1,
            borderWidth: 1,
            borderColor: "#5a97e7",
          },
          viewControl: {
            rotateSensitivity: [1, 0], // 只能横向旋转
            zoomSensitivity: 0, // 禁止鼠标滚轮缩放
            autoRotate: true,
            autoRotateAfterStill: 3,
            distance: 80,
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: 0, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 180, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: true, // 是否开启动画。[ default: true ]
            autoRotateSpeed: 3,
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
            autoRotateDirection: 'ccw',
          },
          emphasis: {
            disabled: true, //是否可以被选中
            label: {
              //移入时的高亮文本
              show: true,
              color: "#fff", //显示字体颜色变淡
              fontSize: 18, //显示字体变大
            },
            itemStyle: {
              color: "#fff", //显示移入的区块变粉色
            },
          },
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          }
        },
        // dataRange: {
        //   x: 'right',
        //   y: 'top',
        //   splitList: [
        //     { start: 0, end: 100 },
        //     { start: 100, end: 200 },
        //     { start: 200, end: 300 },
        //     { start: 300, end: 400 },
        //     { start: 400, end: 500 },
        //     { start: 500, end: 600 },
        //     { start: 600, end: 700 },
        //     { start: 700, end: 800 },
        //     { start: 800, end: 900 },
        //     { start: 900, end: 1000 },
        //   ],
        // },
        series: [
          {
            zlevel: 100,
            type: "bar3D",
            coordinateSystem: "geo3D",
            barSize: 1,
            tooltip: {
              show: true,
              formatter: (e) => {
                console.log(22222, e);

                return ` ${e.name}`;
              },
            },
            // 随便写点模拟数据
            // data: [
            //   { name: "甘肃", value: [103.73, 36.03, -1] },
            //   { name: "青海", value: [101.74, 36.56, 0] },
            //   { name: "四川", value: [104.06, 30.67, 1] },
            //   { name: "河北", value: [114.48, 38.03, 2] },
            //   { name: "云南", value: [102.73, 25.04, 3] },
            //   { name: "贵州", value: [106.71, 26.57, 4] },
            //   { name: "湖北", value: [114.31, 30.52, 5] },
            //   { name: "河南", value: [113.65, 34.76, 6] },
            //   { name: "山东", value: [117, 36.65, 7] },
            //   { name: "江苏", value: [118.78, 32.04, 8] },
            //   { name: "安徽", value: [117.27, 31.86, 9] },
            //   { name: "浙江", value: [120.19, 30.26, 10] },
            //   { name: "江西", value: [115.89, 28.68, 11] },
            //   { name: "福建", value: [119.3, 26.08, 12] },
            //   { name: "广东", value: [113.23, 23.16, 13] },
            //   { name: "湖南", value: [113, 28.21, 14] },
            //   { name: "海南", value: [110.35, 20.02, 15] },
            //   { name: "辽宁", value: [123.38, 41.8, 16] },
            //   { name: "吉林", value: [125.35, 43.88, 17] },
            //   { name: "黑龙江", value: [126.63, 45.75, 18] },
            //   { name: "山西", value: [112.53, 37.87, 19] },
            //   { name: "陕西", value: [108.95, 34.27, 20] },
            //   { name: "台湾", value: [121.3, 25.03, 21] },
            //   { name: "北京", value: [116.46, 39.92, 22] },
            //   { name: "上海", value: [121.48, 31.22, 23] },
            //   { name: "重庆", value: [106.54, 29.59, 24] },
            //   { name: "天津", value: [117.2, 39.13, 25] },
            //   { name: "内蒙古", value: [111.65, 40.82, 26] },
            //   { name: "广西", value: [108.33, 22.84, 27] },
            //   { name: "西藏", value: [91.11, 29.97, 28] },
            //   { name: "宁夏", value: [106.27, 38.47, 29] },
            //   { name: "新疆", value: [87.68, 43.77, 30] },
            //   { name: "香港", value: [114.17, 22.28, 31] },
            //   { name: "澳门", value: [113.54, 22.19, 32] },
            // ],
          },
        ],
      };
      // // 渲染3D地图（已经把2D地图作为材质贴到3D地图上了）
      this.myChart.setOption(option, true);
      //让可视化地图跟随浏览器大小缩放
      // window.addEventListener("resize", () => {
      //   this.myChart.resize();
      // });
    },
    chartMap() {
      this.myChart = this.$echarts.init(
        document.getElementById("mapEchart")
      );
      this.$echarts.registerMap("quanguo", geoJson);
      this.Load3DMap();


    },
  },
  mounted() {
    this.chartMap();
  },
  beforeDestroy() {
    // 防止内存泄露
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
};
</script>

<style scoped>
.map {
  /* height: 7rem; */
  height: 100% !important;
  width: 100%;
}

.map-wutai {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  left: 0;
  top: 0;
  z-index: -1;
}
</style>
